<template>
  <div class="app-container">
    <!-- 设备table -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <!-- <el-form-item label="设备名称" prop="stationName">
          <el-input
            v-model="queryParams.stationName"
            placeholder="请输入设备名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-download" size="mini" @click="exportData"
          >导出</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="id" prop="id" />
      <el-table-column label="发票类型" prop="invoiceType">
        <template slot-scope="scope">
          <span>{{ invoiceTypeMap[scope.row.invoiceType] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发票抬头" prop="title" />
      <el-table-column label="电话" prop="phone" />
      <el-table-column label="开户银行" prop="bank" />
      <el-table-column label="银行账户" prop="bankAccount" />
      <el-table-column label="注册地址" prop="address" />
      <el-table-column label="备注" prop="mark" />
      <el-table-column label="状态" prop="invoiceStatus">
        <template slot-scope="scope">
          <span>{{ invoiceStatusMap[scope.row.invoiceStatus] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="150" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="showInvoiceModal(scope.row)"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      :page-sizes="[10, 20, 30, 50, 500, 1000]"
    />

    <el-dialog
      title="发票详情"
      :visible.sync="invoiceVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- 通过/拒绝 -->
        <el-form-item label="审核处理" prop="invoiceStatus">
          <el-select
            style="width: 100%"
            v-model="form.invoiceStatus"
            placeholder="请选择"
          >
            <el-option label="通过" value="FINISH"></el-option>
            <el-option label="拒绝" value="REFUSE"></el-option>
          </el-select>
        </el-form-item>
        <!-- 发票图片 -->
        <el-form-item
          v-if="form.invoiceStatus === 'FINISH'"
          label="发票图片"
          prop="invoiceImg"
        >
          <el-upload
            action="https://admin-charge.znscxny.com/capi/file/upload_image"
            :headers="uploadHeaders"
            :show-file-list="false"
            :disabled="disabled"
            :on-success="onUploadSuccess"
          >
            <div
              v-if="form.invoiceImg"
              class="invoiceImg"
              :style="{ backgroundImage: `url(${form.invoiceImg})` }"
            >
              <div class="invoiceImg-opt">
                <i
                  class="el-icon-delete"
                  style="color: #fff"
                  @click="handleRemove"
                ></i>
              </div>
            </div>
            <div v-else class="uploader-btn">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </el-form-item>
        <!-- 拒绝原因 -->
        <el-form-item
          v-if="form.invoiceStatus === 'REFUSE'"
          label="拒绝原因"
          prop="refuseDesc"
        >
          <el-input
            v-model="form.refuseDesc"
            type="textarea"
            placeholder="请输入拒绝原因"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getListAPI, solveAPI } from "@/api/charge/invoice";
import moment from "moment";
import { getToken } from "@/utils/auth";
import { exportExcel, exportExcelFromAPI } from "@/utils/utils";

export default {
  name: "Order",
  data() {
    return {
      moment,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      tableList: [],

      // 日期范围
      dateRange: [],

      invoiceTypeMap: {
        PERSONAL: "个人/非企业",
        ENTERPRISE: "企业单位",
      },
      invoiceStatusMap: {
        CREATE: "开票中",
        FINISH: "已开票",
        REFUSE: "已拒绝",
      },

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        invoiceStatus: "FINISH",
      },

      // 表单校验
      rules: {
        invoiceStatus: [{ required: true, message: "请选择" }],
        invoiceImg: [{ required: true, message: "请上传发票图片" }],
        refuseDesc: [{ required: true, message: "请输入拒绝原因" }],
      },
      invoiceVisible: false,

      uploadHeaders: {
        Authorization: "Bearer " + getToken(),
      },

      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    invoiceVisible(val) {
      if (!val) {
        this.myChart.clear();
      }
    },
    "form.invoiceStatus"() {
      this.$refs["form"].clearValidate("invoiceImg");
      this.$refs["form"].clearValidate("refuseDesc");
    },
  },
  methods: {
    exportData() {
      exportExcelFromAPI("/invoice/list/export", {
        ...this.queryParams,
        pageNum: 1,
        pageSize: 10000,
      });
      return false;
      exportExcel({
        data: this.formatTableList(this.tableList),
        headers: [
          { label: "id", key: "id" },
          { label: "发票类型", key: "invoiceType" },
          { label: "发票抬头", key: "title" },
          { label: "电话", key: "phone" },
          { label: "开户银行", key: "bank" },
          { label: "银行账户", key: "bankAccount" },
          { label: "注册地址", key: "address" },
          { label: "备注", key: "mark" },
          { label: "状态", key: "invoiceStatus" },
          { label: "创建时间", key: "createTime" },
        ],
        filename: "发票数据.xlsx",
      });
    },
    // 格式化表格数据
    formatTableList(data) {
      return data.map((item) => {
        return {
          ...item,
          invoiceType: this.invoiceTypeMap[item.invoiceType],
          invoiceStatus: this.invoiceStatusMap[item.invoiceStatus],
        };
      });
    },
    onUploadSuccess(res) {
      if (res.status === 200) {
        this.form = {
          ...this.form,
          invoiceImg: res.data,
        };
        this.disabled = true;
      } else {
        this.$modal.msgError(res.desc);
      }
    },
    handleRemove() {
      this.form = {
        ...this.form,
        invoiceImg: "",
      };
      setTimeout(() => {
        this.disabled = false;
      }, 200);
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      getListAPI({
        ...this.queryParams,
      }).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 提交审核发票
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          solveAPI({
            ...this.form,
          }).then((res) => {
            this.$modal.msgSuccess("操作成功");
            this.invoiceVisible = false;
            this.getList();
          });
        }
      });
    },
    showInvoiceModal(row) {
      this.form = {
        id: row.id,
      };
      this.resetForm("form");
      this.invoiceVisible = true;
    },
    cancel() {
      this.form = {};
      this.resetForm("form");
      this.invoiceVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.invoiceImg {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  border-radius: 8px;

  &:hover {
    .invoiceImg-opt {
      opacity: 1;
    }
  }

  .invoiceImg-opt {
    transition-duration: 0.2s;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0;
  }
}

.uploader-btn {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  box-sizing: border-box;
  border-radius: 8px;
}
</style>
